<template>
  <el-form :model="form" class="form" :rules="rules" ref="form">
        <el-form-item prop="username">
            <el-input v-model="form.username" placeholder="用户名/手机" @focus="clearMsg('username')"></el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input v-model="form.password" placeholder="密码" @focus="clearMsg('password')"></el-input>
        </el-form-item>
        <div class="forget"><span @click="$message.warning('后续实现')">忘记密码</span></div>
        <el-button type="primary" @click="login">登录</el-button>
    </el-form>
</template>

<script>
export default {
    data(){
        return{
            form:{
               username:'13800138000', 
               password:'123456'
            },
            // 表单规则
            rules:{
                username:[
                    {required:true,message:'请输入用户名/手机号',trigger:'blur'},
                    {min:6,max:15,message:'用户名/手机号在6~15个字符之间',trigger:'blur'},
                    {pattern:/^\d+$/,message:'用户名/手机号只能输入数字',trigger:'blur'}
                ],
                password:[
                    {required:true,message:'请输入密码',tigger:'blur'},
                    {pattern:/^\d{6}$/,message:'密码只能输入6位',trigger:'blur'}
                ]
            },
        }
    },
    methods:{
        login(){
            // 也可以用 promise 形式实现, 这是饿了么已经封装好的
            // this.$refs.form.validate().then((isValid)=>{
            //     // 第一个参数代表是否验证成功, 只有成功的状态, 才发出请求
            //     if (isValid) {
            //         this.$axios({
            //             url: "/accounts/login",
            //             method: "POST",
            //             data: this.form
            //         }).then(res => {
            //             console.log(res.data);
            //         })
            //     }
            // }).catch(err=>{
            //     console.log(err);
            // })
            // 我们需要在发送之前进行一次总的校验复核一遍
            // 拿到表单对象, 直接调用他的方法, 传入回调
            this.$refs.form.validate((isValid,objNotValid) => {
                // 第一个参数代表是否验证成功, 只有成功的状态, 才发出请求
                if(isValid){
                    // 调用 mutations 是 commit
                    // 调用 actions 是 dispatch
                    // login方法共享在store中
                    // vuex action 将 promise 返回出来
                    this.$store.dispatch('user/login',this.form).then(res => {
                        // 这里可以接收res进行处理
                        // 内部 promise 的 .then 函数里面要将数据返回出来
                        console.log(res);
                    })
                }else{
                    console.log(objNotValid);
                }
            }); 
        },
        clearMsg(propName){
            // 如果拿到一个数据的 prop 名字
            // 就可以直接调用表单,来清理对应数据的错误信息
            // 当有验证的错误结果出来后，再点击输入框填写信息时验证的错误会消失
            this.$refs.form.clearValidate(propName);
        },
    }

}
</script>

<style lang="less" scoped>
.form{
    padding:26px;
}
.forget{
    padding-bottom:10px;
    text-align: right;
    font-size: 12px;
    color: #00A0FF;
}
.el-button--primary{
    width:100%;
}
</style>